<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useAdminStore from '@src/stores/useAdminStore.ts'

const adminStore = useAdminStore()
const userInfo = storeToRefs(adminStore).adminInfo
</script>

<template>
  <div class="header">
    <h1>
      <el-text class="text"
        ><img
          src="/cem.svg"
          alt="cem"
          height="30"
          width="30"
        />班费管理系统（后台）</el-text
      >
    </h1>
    <div class="avatar">
      <el-dropdown>
        <el-avatar>
          <el-text v-if="userInfo.name">
            {{ userInfo.name?.substring(0, 1) }}
          </el-text>
        </el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-popconfirm @confirm="adminStore.logout()" title="确认退出吗?">
                <template #reference>
                  <el-text type="danger">退出登录</el-text>
                </template>
              </el-popconfirm>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped lang="less">
.header {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;

  .text {
    font-size: 2em;
    display: flex;
    align-items: center;
    margin-left: 10px;
  }

  .avatar {
    position: absolute;
    right: 30px;
  }
}
</style>
